<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    https://vuex.vuejs.org/zh/

    vue2---》vuex3
    vue3---》vuex4

    vuex是专门为vue提供的大仓库，采用状态管理的大仓库
    Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
    它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

    安装vuex
    1. 创建项目的时候，直接选vuex, 
    src目录先多一个文件夹 store---》index.js(写好的模板)导出仓库
    在main.js中导入，挂载到vm上
    import store from './store'
    let vm=new Vue({
        store,
        render: h => h(App)
    }).$mount('#app')

    2.创建项目的时候，没有选择vuex
      重新安装 vuex: npm install vuex --save/yarn add vuex
      什么基础操作都没有，需要自己手动编写和操作

        import Vue from 'vue'
        import Vuex from 'vuex'
        Vue.use(Vuex)
        const store=new Vuex.Store({})
        export default store;

Vuex 有5部分

1. state  相当于vue中的data
设置值：
export default new Vuex.Store({
    state: {
      num:100,
      str:"hello"
    }
})

获取值:
1.{{ $store.state.num }}

2.data(){
    return {
      n:this.$store.state.num
    }
}

3.computed:{//推荐
    m(){
      return this.$store.state.num
    }
}

4.mapState 辅助函数 //推荐     数组，对象

数组:直接接收
import { mapState } from 'vuex';
computed:mapState(["num","str"])

{{ num }}--{{ str }}

对象：接收后，换一个名称
computed:mapState({
    nn:state=>state.num,
    ss:"str",
    mm(state){
      return state.num+200
    }
  })
  {{ nn }}---{{ ss }}---{{ mm }}


辅助函数 与 计算属性的其他属性共存
computed:{
    ...mapState({
      nn:state=>state.num
    }),
    fullName(){
      
    }
}

2. getters 相当于vue中的计算属性,对state的数据二次处理
设置值：
export default new Vuex.Store({
    state: {
        arr:[10,20,30,40,50,60]
      },
      getters:{
        //函数的写法，属性的用法
        //作用 state里面的数据进行二次处理返回
        newarr:(state)=>{
            return state.arr.filter((item)=>{
                return item>30
            })
        }
      }
})

获取值:
1.{{ $store.getters.newarr }}

2.data(){
    return {
      arr1:this.$store.getters.newarr
    }
}

3.computed:{//推荐
    arr2(){
      return this.$store.getters.newarr
    }
}

4.mapGetters 辅助函数 //推荐     数组，对象

数组:直接接收
import { mapGetters } from 'vuex';
computed:mapGetters(["newarr"])

{{ newarr }}

对象：接收后，换一个名称
computed:mapState({
    arr:"newarr"
  })
  {{ arr }}


辅助函数 与 计算属性的其他属性共存
computed:{
    ...mapGetters(["newarr"]),
    fullName(){
      
    }
}

Vuex 是单项数据流,state只能通过Mutation来修改
3. Mutation 同步方法（仓库管理员）

export default new Vuex.Store({
    state: {
      num:100
    },
    mutations: {
      addNum(state,payload){
         //console.log(payload);
         //state.num++
         state.num+=payload.n;
      }
    }
  })

----
    {{ $store.state.num }}
    <button @click="add">add</button>

<script>
export default {
 methods:{
  //  add(){//页面数据可以修改，仓库数据无法修改
  //     this.$store.state.num++;
  //  }
  add(){//要想执行 mutations里面的方法，必须通过 commit()
      //commit(函数名，参数) 只有两个值  
      //如果第二个“参数”，想要传递多个内容，数组，对象
      this.$store.commit("addNum",{n:10,m:20})
  }
 }
}
</script>


使辅助函数
import { mapMutations } from 'vuex';

methods:{
    ...mapMutations({
     add:"addNum"
    })
}
<button @click="add({n:10,m:20})">add</button>


methods:{
    ...mapMutations([ "addNum"])
}
<button @click="addNum({n:100,m:200})">add</button>


4.Action 存放异步的方法

export default new Vuex.Store({
    state: {
      n:10
    }
    mutations: {
      addN(state,payload){//通过mutations做异步操作效果实现的不对
          state.n+=payload;
      }
    },
    actions: {
      AsyncAddN(context,payload){
        //console.log(context);//{commit,...}
        setTimeout(() => {
           context.commit("addN",payload);
        }, 1000);
      }
    }
  })



   {{ $store.state.n }}
   <button @click="addN">addN</button>

  export default {
    methods:{
      addN(){
         //this.$store.commit("addN")
         //通过dispatch来调用 actions
         this.$store.dispatch("AsyncAddN",10)
      }
    }
  }
  

  使辅助函数
import { mapActions } from 'vuex';

methods:{
    ...mapActions({
     add:"AsyncAddN"
    })
}
<button @click="add(10)">add</button>


methods:{
    ...mapActions(["AsyncAddN"])
}
<button @click="AsyncAddN(10)">add</button>

5.modules 模块, 将仓库进行划分，每个模块任然具有5部分

模块1: 看图片--1

const ModelA={
    state:{
      arra:[1,2,3,4,5]
    },
    getters:{
      newarra(store){
         return store.arra.filter((item)=>{
             return item>3
         })
      }
    }
 }
 
 const ModelB={
   state:{
     numb:200
   },
   mutations:{
     changeNum(state){
        state.numb+=10;
     }
   }
 }
 
 
 export default new Vuex.Store({
   modules: {
     a:ModelA,
     b:ModelB
   }
 })

 使用：
    {{ $store.state.b.numb }}
    {{ $store.getters.newarra }}
  
  <button @click="changeNum">changeNum</button>


  import { mapMutations } from 'vuex';
  export default {
     methods:{
        ...mapMutations(["changeNum"])
     }
  }


模块2******:
namespaced: true,//添加命名空间

        {{ $store.state.b.numb }}
        {{ newarra }}
        <button @click="changeNum">changeNum</button>

  
 import {mapGetters, mapMutations } from 'vuex';
  export default {
      computed:{
          ...mapGetters("a",["newarra"])
      },
      methods:{
          ...mapMutations("b",["changeNum"])
      }
  }

-------------------
     
        {{ newarra }}
        {{ $store.getters["a/newarra"] }}
        <button @click="changeNum">changeNum</button>

  
  import {createNamespacedHelpers} from 'vuex';
  const { mapGetters } =createNamespacedHelpers("a");
  const { mapMutations } =createNamespacedHelpers("b");
  
  export default {
      computed:{
          ...mapGetters(["newarra"])
      },
      methods:{
         // ...mapMutations(["changeNum"])
          changeNum(){
            this.$store.commit("b/changeNum")
           }
      }
  }


  6.插件

  日志插件
  import createLogger from 'vuex/dist/logger'
    const store = new Vuex.Store({
    plugins: [createLogger()]
    })

 
vuex数据持久化插件(了解)
https://blog.csdn.net/qq_46343149/article/details/124435225


  vuex 
  作用一： 实现数据通信
  作用二： 数据缓存  切换页面(前进后退)，数据不变(缓存);  除非刷新或者关闭



</body>
</html>